<template>
  <view class="car-photo">
    <Title icon="title-icon1" title="实车图片"></Title>
    <view class="btns">
      <view v-for="itm in activeInfo" @click="activeKey = itm.key" :key="itm.key"
        :class="{ 'active': activeKey === itm.key, 'btn': true }">{{ itm.title }}</view>
    </view>
    <view class="img-list">
      <image class="img" :src="img" v-for="(img, ind) in props.info[activeKey]" :key="ind" @click="showPhoto(ind)">
      </image>
    </view>
  </view>
</template>

<script setup>
import Title from "@/components/ui/title"
import { ref } from "vue"
const props = defineProps({
  info: Object,
})
const activeInfo = [
  {
    key: "images",
    title: "车辆外观",
  },
  {
    key: "inside_images",
    title: "车辆内饰",
  },
]
//images  inside_images
const activeKey = ref(activeInfo[0].key)

function showPhoto(ind) {
  const filteredArray = [...props.info.inside_images, ...props.info.images].filter(
  (item) => item
);  
  uni.previewImage({
    urls: filteredArray,
    current: ind
  })
}
</script>
<style lang="less" scoped>
@import url(./index.less);
</style>
